<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>解惑APP下载</title>
    <style>
    ul li{
        list-style:none
    }
    a{
        text-decoration: none;
    }
    *{
        padding:0;
        margin: 0;
    }
    body,html{
        overflow: hidden;
        width: 100%;
    }
    body{
        font-family: "微软雅黑", Helvetica, Arial, sans-serif;
        margin: 0 auto;
        padding: 0;
    }
    html{
     height:100%;
     width: 100%;
     overflow: hidden;
     outline: 0;
    }
    .header_app{
        overflow: hidden;
        width: 100%;
        padding-top: 0.9rem;
        margin-left:0.75rem;
        margin-right:0.75rem;
    }
    .header_img{
        /*margin-top: 0.9rem;*/
        border: none;
        width: 2.6rem;
        height: 2.6rem;
     }
    .header_logo_name{
        color:#fff;
        margin-left: 0.425rem;
        vertical-align: top;
        display: inline-block;
        font-size:1.2rem;
        line-height: 2.6rem;
        height: 2.6rem;
    }
    .header_h_f{
        margin-top: 0.95rem;
        color:#fff;
        font-size: 1rem;
        height: 1.4rem;
        line-height: 1.4rem;
        /*color:#fff;*/
        margin-left: 0.65rem;
    }
    .header_h_f_d {
        color:#fff;
        height:1.15rem;
        line-height: 1.15rem;
        font-size: 0.75rem;
        margin-left: 2.3rem;
    }
    .mid_pic{
        width:100%;
        margin-top: 1.45rem;
        margin-bottom:2.15rem;
    }
    .limit_pic{
        display: block;
        width: 15.35rem;
        margin: 0 auto;
    }
    .footer_btn{
        width: 6.1rem;
        height:1.925rem;
        float: left;
        line-height: 1.925rem;
        text-align: center;
        font-size: 0.75rem;
        color:#fff;
        border-radius: 1.925rem;
        background-color: #75cbff;
        border: 0.05rem solid #fff;
    }
    .footer{
            width:100%;
    }
    .container_footer_btn{
     margin: 0 0.75rem;
    }
    .m_l_24{
       margin-left:0.6rem;
    }
    .m_r_24{
        margin-right:0.6rem;
    }
    .m_l_1-05{
        margin-left:1.05rem;
    }
    .body_pic{
        background-image: url(img/bg_a_1.jpg);
        background-size: cover;
        width: 100%;
        height: 28.4rem;
    }

    </style>
</head>
<body>
<div class="body_pic">
    <header class="header_app">
        <img src="img/logo.png" alt="" class="header_img"><span class="header_logo_name">解惑</span>
        <P class="header_h_f">解惑APP</P>
        <P class="header_h_f_d">——解决困惑，又有趣好玩的APP </P>
    </header>
    <section class="mid_pic">
        <img src="img/bg_img_app.png" alt="" class="limit_pic">
    </section>
    <footer class="footer">
        <ul class="container_footer_btn">
            <a href="javascript:void(0);">
                <li  class="footer_btn m_l_24">Iphone版下载</li>
            </a>
            <a href="javascript:void(0);">
                 <li  class="footer_btn m_l_1-05 ">Andriod版下载</li>
            </a>
        </ul>
    </footer>
</div>
</body>
<script>
(function (doc, win) {
    var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

</script>
</html>